<template>
	<el-header>
		<el-carousel height="60px" direction="vertical" :autoplay="true" style="float: left;width: 100%;">
			<el-carousel-item v-for="item in noticeList" :key="item.recordId" style="line-height: 60px;">
				<h3 class="medium" style="display: inline-block">【{{item.noticeTypeName}}】{{ item.title }}</h3>
				<span style="display: inline-block;margin-left: 20px;">{{item.remark}}</span>
			</el-carousel-item>
		</el-carousel>
	</el-header>
	<el-main>
		<el-row :gutter="15">
			<el-col :xl="6" :lg="6" :md="8" :sm="12" :xs="24" v-for="item in list" :key="item.recordId">
				<el-card class="discuss discuss-item" shadow="hover" @click="openTopicList(item)">
					<h2>{{ item.title }}</h2>
					<ul>
						<li>
							<p class="info-title"><span>版主:{{ item.userName }}</span><span style="float:right;"><el-tag size="small">{{ item.discussTypeName }}</el-tag></span></p>
						</li>
						<li>
							<p class="info-title"><span>发帖数:{{ item.zs }}条</span><span style="float:right;">最后：{{ item.lastSendTime == undefined ? '暂无' : item.lastSendTime }}</span></p>
						</li>
						<li>
							<h4>版块说明</h4>
							<div class="info-title" style="height: 30px;" :title="item.remark">{{ item.remark }}</div>
						</li>
					</ul>
				</el-card>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
export default {
	name: 'My Discuss',
	components: {},
	data() {
		return {
			dialog: {
				save: false
			},
			list: [],
			noticeList:[],
		}
	},
	mounted() {
		this.getMyDiscussList();
		this.getDiscussNoticeList();
	},
	methods: {
		openTopicList(item)
		{
			this.$nextTick(() => {
				this.$router.replace({
					path: '/info/discuss/topiclist',
					query:{
						discussId:item.recordId
					}
				})
			})
		},
		async getMyDiscussList() {
			var res = await this.$API.info.discuss.getMyDiscussList.get();
			this.list = res.data;
		},
		async getDiscussNoticeList(){
			var res = await this.$API.info.discuss.getDiscussNoticeList.get();
			this.noticeList = res.data;
		}
	}
}
</script>

<style scoped>
.discuss {
	height: 180px;
	cursor: pointer;
}

.discuss-item h2 {
	font-size: 15px;
	color: #3c4a54;
	padding-bottom: 15px;
}

.discuss-item li {
	list-style-type: none;
	margin-bottom: 10px;
}

.discuss-item li h4 {
	font-size: 12px;
	font-weight: normal;
	color: #999;
}

.discuss-item li p {
	margin-top: 5px;
}

.discuss-item .bottom {
	border-top: 1px solid #EBEEF5;
	text-align: right;
	padding-top: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.discuss-add i {
	font-size: 30px;
}

.discuss-add p {
	font-size: 12px;
	margin-top: 20px;
}

.dark .discuss-item .bottom {
	border-color: var(--el-border-color-light);
}

.info-title {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	cursor: pointer;
}
</style>
